<template>
    <el-container class="container f fv fac">
        <div class="header f fac fpj">
            <div class="left f fac">
                <div class="item" :class="[active == 0 ? 'active' : '']" @click="go(0)">首页</div>
                <div class="item" :class="[active == 1 ? 'active' : '']" @click="go(1)">电影</div>
                <div class="item" :class="[active == 2 ? 'active' : '']" @click="go(2)">影院</div>
                <div class="item" :class="[active == 3 ? 'active' : '']" @click="go(3)">排行榜</div>
            </div>
            <div class="right f fac">
                <el-input placeholder="请输入电影" :suffix-icon="Search" style="margin-right: 12px;"></el-input>
                <el-button type="primary" @click="$router.push('/login')">登录/注册</el-button>
            </div>
        </div>
        <router-view></router-view>
    </el-container>
</template>

<script setup>    
    import { Search } from '@element-plus/icons-vue'
    import { useRouter } from 'vue-router'
    const router = useRouter()
    const active = ref(0)

    const go = (val) => {
        active.value = val
        switch (val) {
            case 0:
                router.push('/home')
                break;
            case 1:
                router.push('/movie')
                break;
            case 2:
                router.push('/cinema')
                break;
            case 3:
                router.push('/rank')
                break;
            default:
                break;
        }
    }

</script>

<style lang="scss" scoped>
.container {
    width: 100%;
    .header {
        width: 80%;
        height: 68px;
        .left {
            .item {
                margin-right: 24px;
                cursor: pointer;
                &:hover {
                    color: var(--el-color-primary);
                }
            }
            .active {
                color: var(--el-color-primary);
            }
        }
    }
}
</style>